<template>
  <div>
    <!-- //1顶部栏 -->
    <div class="concat-box">
      <!-- //背景栏 -->
      <van-nav-bar fixed>
        <!-- 左边的logo -->
        <template #left>
          <!-- //img用法 -->
          <img src="@/assets/logo.png" alt="" width="100" height="30" />
        </template>
        <!-- 右边的搜索按钮 -->
        <template #right>
          <van-button
            icon="search"
            type="primary"
            round
            @click="$router.push('/search')"
          >
            搜索
          </van-button>
        </template>
      </van-nav-bar>
    </div>
    <!-- 2.tabs栏 -->
    <!-- //2.tab栏 -->
    <van-tabs v-model="active" @click="tabClick">
      <van-tab v-for="item in channelList" :key="item.id" :title="item.name">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-cell
              v-for="item in articleList"
              :key="item.art_id"
              :title="item.title"
              @click="
                $router.push({ path: '/article', query: { id: item.art_id } })
              "
            >
              <template #label>
                <van-grid :column-num="item.cover.type">
                  <van-grid-item
                    v-for="(it, index) in item.cover.images"
                    :key="index"
                  >
                    <van-image :src="it" Lazy-load />
                  </van-grid-item>
                </van-grid>
                <br />
                <span>{{ item.aut_name }}</span
                >&nbsp;&nbsp; <span>{{ item.comm_count }}评论</span>&nbsp;&nbsp;
                <span>{{ item.pubdate | fromNow }}</span
                >&nbsp;&nbsp;
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
//导入 mapState 辅助函数
import { getChannelList, getArticleList } from './home.js'
//导入moment
import * as moment from 'moment'
//设置语言
moment.locale('zh-cn')
export default {
  name: 'home',
  data () {
    return {
      active: 0, //tabs栏点击
      list: [], //频道列表数据
      loading: false, //上拉加载更多动画
      finished: false, //是否全部加载完毕
      isLoading: false, // 下拉刷新动画
      channelList: [], //频道列表
      timestamp: null,
      articleList: []
    }
  },
  async created () {
    //请求频道列表
    let res = await getChannelList()
    //绑定数据
    this.channelList = res.data.data.channels
    // console.log(res)
  },
  methods: {
    //1.加载更多数据
    async onLoad () {
      //1.1判断是不是第一页
      if (!this.timestamp) {
        this.timestamp = Date.now()
      }
      //1.2方发送请求
      let res = await getArticleList({
        channel_id: this.channelList[this.active].id,
        timestamp: this.timestamp
      })
      // console.log(res)
      //1.3存储服务器返回的时间戳,用于请求下一页数据
      this.timestamp = res.data.data.pre_timestamp
      //1.4绑定数据
      this.articleList.push(...res.data.data.results)
      //1.5设置loading为false:表示本次数据加载完毕
      this.loading = false
      //1.6 限制最多数据100条 超过100条 设置finished属性为true
      if (this.list.length >= 30) {
        this.finished = true
      }
    },
    // 2.下拉刷新数据
    onRefresh () {
      //0一旦下拉刷新,需要无条件设置list组件的finished为false
      this.isLoading = false
      //1关闭下拉刷新动画
      this.finished = false
      //2清空列表 与时间戳
      this.articleList = []
      this.timestamp = null
      //3开启加载更多动画
      this.loading = true
      //4.主动触发加载更多事件
      this.onLoad()
    },
    //3.点击tab栏切换
    tabClick () {
      console.log(this.active)
      //1.清空列表 与时间戳
      this.articleList = []
      this.timestamp = null
      //2.开启加载更多动画
      this.loading = true
      //3.主动触发加载更多事件
      this.onLoad()
    }
  },
  //过滤器
  filters: {
    fromNow (value) {
      // console.log(this)
      //转成相对时间
      return moment(value).fromNow()
    }
  }
}
</script>

<style lang="less">
//导航栏右边按钮
.concat-box {
  //右边的按钮
  .van-nav-bar__right {
    .van-button {
      width: 100px;
      height: 35px;
      background-color: #00affd;
      .van-icon {
        color: rgb(255, 255, 255);
      }
    }
  }
}

//2.tabs布局
.van-tabs {
  //2.1头部tab栏
  .van-tabs__wrap {
    position: fixed;
    width: 100%;
    top: 46px;
    z-index: 10;
  }
  //2.2内容
  .van-tabs__content {
    //设置列表栏上的margin,避免被导航栏与tab栏遮挡(固定定位导致脱标)
    margin-top: 90px;
    //设置列表栏下的margin 避免被底部栏脱标导致遮挡
    margin-bottom: 50px;
  }
}
</style>
